<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        li{list-style: none;}
    </style>
</head>
<body>
    <div id="app">
        <input type="text" v-model='val' name="txt" id="txt"> <button @click='addEvt'>添加</button>
        <div>
            <h2>未完成 --- {{len}}</h2>
            <ul>
                <li v-for='(item,index) in arr' v-show='!item.checked'  checked='false'> <input v-model='item.checked' type="checkbox"> <span>{{item.val}} <button @click='del(index)'>删除</button> </span></li>
            </ul>
        </div>

        <div>
            <h2>已完成----{{arr.length - len }}</h2>
            <ul>
                <li v-for='(item,index) in arr' v-show='item.checked'  checked='ture'> <input v-model='item.checked' type="checkbox"> <span>{{item.val}} <button @click='del(index)'>删除</button> </span></li>
            </ul>
        </div>
    </div>

<!-- dddd -->
    <script src="./vue.js"></script>
    <script>
        const vm = new Vue({
            el:'#app',
            data:{
                val:'',
                arr:[],
            },
            methods:{
                addEvt(){
                    this.arr.push(
                        {
                            'val':this.val,
                            checked:false
                        }
                    );
   
                },
               
                del(num){
                    this.arr.splice(num,1);
                }
            },
            computed:{
                    len(){
                        return this.arr.filter((item)=>{
                            return item.checked  === false
                        }).length
                    }
                },
        })
    </script>
</body>
</html>